<template>
  <div v-loading="isLoadingData">
    <el-button type="primary" plain @click="showAddRole">添加头衔</el-button>
    <el-table :data="role_list" stripe style="width: 100%">
      <el-table-column prop="id" width="80" label="ID" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column label="预览" width="180">
        <template #default="scope">
          <el-tag
            :color="role_list[scope.$index].color"
            :type="role_list[scope.$index].type"
            :effect="role_list[scope.$index].effect"
          >
            {{ role_list[scope.$index].name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button
            size="small"
            link
            type="primary"
            @click="showEditItem(scope.$index)"
            >编辑</el-button
          >
          <el-button
            size="small"
            link
            type="danger"
            @click="showLockItem(scope.$index)"
          >
            <div v-if="role_list[scope.$index].stat == 0">启用</div>
            <div v-else>停用</div>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="page"
      background
      :page-size="limit"
      layout="prev, pager, next"
      :total="total"
      style="margin: 2rem 0"
    />
  </div>

  <!--停用头衔弹窗-->
  <dialog-confirm
    title="提示"
    v-model:visible="dialogShow.lockRole"
    :loading="isLocking"
    @submit="lockItem(4)"
  >
    <span>
      <span>是否停用头衔[ID:{{ activeItem.id }}]</span>
      <span style="color: #008ac5">{{ activeItem.name }}</span>
    </span>
  </dialog-confirm>

  <!--添加/编辑头衔弹窗-->
  <dialog-confirm
    v-model:visible="dialogShow.addRole"
    :title="activeItem.id > 0 ? '修改头衔' : '添加头衔'"
    :loading="isLocking"
    @submit="addRole"
  >
    <el-form>
      <el-form-item label="预览">
        <el-tag
          :effect="roleConfig.effect"
          :type="roleConfig.type"
          :color="roleConfig.color"
        >
          {{ roleConfig.name }}
        </el-tag>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="roleConfig.name"></el-input>
      </el-form-item>
      <el-form-item label="颜色">
        <el-color-picker v-model="roleConfig.color" show-alpha />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="roleConfig.type" placeholder="请选择">
          <el-option label="默认" value="" />
          <el-option label="success" value="success" />
          <el-option label="info" value="info" />
          <el-option label="warning" value="warning" />
          <el-option label="danger" value="danger" />
        </el-select>
      </el-form-item>
      <el-form-item label="效果">
        <el-select v-model="roleConfig.effect" placeholder="请选择">
          <el-option label="dark" value="dark" />
          <el-option label="light" value="light" />
          <el-option label="plain" value="plain" />
        </el-select>
      </el-form-item>
      <el-form-item label="权限(未实现)">
        <el-checkbox-group>
          <el-checkbox label="后台可见" name="type" />
          <el-checkbox label="网站配置" name="type" />
          <el-checkbox label="头衔修改" name="type" />
          <el-checkbox label="审核资源" name="type" />
          <el-checkbox label="重置账号密码" name="type" />
          <el-checkbox label="账号列表操作" name="type" />
          <el-checkbox label="资源列表操作" name="type" />
          <el-checkbox label="帖子列表操作" name="type" />
          <el-checkbox label="板块列表操作" name="type" />
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </dialog-confirm>
</template>
<script lang="ts">
import DialogConfirm from '@comps/dialogs/confirm.vue'
import Method from '@/globalmethods.ts'
import { ElMessage } from 'element-plus'
import { watch } from 'vue'
import { res, roleItem } from '../type.ts'

export default {
  name: 'admin-role',
  components: { DialogConfirm },
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      isLoadingData: false,
      isLocking: false,
      isInjecting: false,
      isPassing: false,
      roleConfig: <roleItem>{
        id: 0,
        name: '预览',
        color: '',
        type: '',
        effect: 'plain',
      },
      role_list: <roleItem[]>[],
      user_role_list: <roleItem[]>[],
      activeItem: <roleItem>{},
      dialogShow: {
        addRole: false,
        lockRole: false,
        setRole: false,
      },
    }
  },
  methods: {
    /**
     * 头衔列表刷新
     */
    refreshRoleList() {
      this.isLoadingData = true
      let payLoad = {
        page: this.page,
        limit: this.limit,
      }
      Method.api_post('/admin/role_list', payLoad).then((response) => {
        this.isLoadingData = false
        let res = response.data
        if (res.code == 200) {
          if (this.page == 1) this.total = res.sum
          this.role_list = res.data as roleItem[]
        }
      })
    },
    showAddRole() {
      this.dialogShow.addRole = true
      this.roleConfig = <roleItem>{
        id: 0,
        name: '预览',
        color: '',
        type: '',
        effect: 'plain',
      }
    },
    addRole() {
      this.isLocking = true
      Method.api_post('/admin/add_role', this.roleConfig).then((response) => {
        let res = response.data
        this.isLocking = false
        if (res.code == 200) {
          this.roleConfig = {
            id: 0,
            name: '预览',
            color: '',
            type: '',
            effect: 'plain',
            stat: 1,
          }
          this.dialogShow.addRole = false
          this.refreshRoleList()
          ElMessage(this.roleConfig.id > 0 ? '修改成功' : '添加成功')
        } else {
          ElMessage(res.msg)
        }
      })
    },
    showLockItem(index: number) {
      this.dialogShow.lockRole = true
      this.activeItem = this.role_list[index]
      this.roleConfig = Method.copyObject(this.activeItem)
    },
    showEditItem(index: number) {
      this.dialogShow.addRole = true
      this.activeItem = this.role_list[index]
      this.roleConfig = Method.copyObject(this.activeItem)
    },
    lockItem(type: number) {
      this.isLocking = true
      let id = this.activeItem.id
      let stat = this.activeItem.stat == 1 ? 0 : 1
      Method.api_post('/admin/lock_item', {
        type: type,
        id: id,
        stat: stat,
      }).then((response) => {
        this.isLocking = false
        let res = <res>response.data
        if (res.code == 200) {
          this.activeItem.stat = res.data.stat
          this.dialogShow.lockRole = false
          ElMessage(res.data.stat === 0 ? '锁定成功' : '解锁成功')
        }
      })
    },
  },
  mounted() {
    this.refreshRoleList()
    watch(
      () => this.page,
      () => {
        this.refreshRoleList()
      },
    )
  },
}
</script>
